// 歌手歌单
import React, {Component} from 'react';
import ListHeader from "../../Components/ListHeader";
import BaseList from "../../Components/BaseList";
import './index.css'

class SingerAlbum extends Component {
    state = {
        artist: {},
        hotSongs: [],
    }
    render() {
        const {artist,hotSongs} = this.state;
        return (
            <div className={'singerAlbumPage'}>
                <ListHeader title={artist.name || '加载中...'} {...this.props}></ListHeader>
                <div className="bb"></div>
                {artist.name? <div className={'box'}>
                    <div className="img">
                        <img src={artist.img1v1Url} alt="singer"/>
                    </div>
                </div> : null}
                <div className="hr"></div>
                {hotSongs.length>0? <div className={'list'}>
                    <div className="btn">
                        <button>收藏</button>
                    </div>
                    <BaseList list={hotSongs}></BaseList>
                </div>:null}
            </div>
        );
    }
    componentDidMount() {
        this.getData()
    }
    getData = async () =>{
        let {id} = this.props.location.state;
        let data = await this.$api.getSingerAlbum(id);
        console.log(data);
        this.setState({
            artist: data.artist,
            hotSongs: data.hotSongs,
        })
    }
}

export default SingerAlbum;